<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        form input{
            outline: 0;
        }
    </style>
</head>
<body>
    <form action="/user/login">
        用户名:<input type="text" id="username"><br/>
        密&emsp;码:<input type="password" id="password"><br/>
        <select id="city">
            <option value="1">过儿</option>
            <option value="2">露露</option>
            <option value="3">金莲</option>
            <option value="4">大郎</option>
        </select><br/>
        <button type="submit" >提交</button> 
    </form>

    <script>
        //1.onsubmit 提交事件 : 表单提交是form在提交。所以绑定在form
        var from = document.querySelector("form")
        from.onsubmit = function(){
            alert("表单我被提交了")
        }
        //2.oninput  输入事件
        var uname = document.getElementById("username")
        uname.oninput = function(){//函数内部写this  ---> uname
            if(this.value.length<=6){
                this.style.border="solid 1px red"
            }else{
                this.style.border="solid 1px green"
            }
        }
        //3.onblur   失去焦点
        var password =  document.querySelector("#password")
        password.onblur = function(){
            this.value="";//失去焦点，清空密码框的值
        }
        //4.onchange 发生改变
        var city = document.getElementById("city")
        city.onchange = function(){
            alert("值改变了，所以执行了")
        }
    </script>
</body>
</html>